<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{padding-top:100px;}
			*{padding: 0;border: 0;margin: 0;outline: 0;box-sizing: border-box;}
			span{display: inline-block;width: 25%;height: 50px;line-height:50px;float: left;text-align: center;border-bottom: 1px solid #ddd;border-right:1px solid #ddd;cursor: pointer;}
			span:hover{background-color: #f5f5f5;}
			.calculator{width: 200px;margin: 0 auto;border:1px solid #ddd;}
			.calculator::after{content: "";display: block;height: 0;overflow: hidden;clear: both;}
			.screen{height: 50px;border-bottom: 1px solid #ddd;word-break: break-word;}
			.no-right-border{border-right:0;}
			.no-bottom-border{border-bottom: 0;}
		</style>
	</head>
	<body>
		<div class="calculator">
			<div class="screen" id="screen"></div>
			<span onclick="input(this)">1</span>
			<span onclick="input(this)">2</span>
			<span onclick="input(this)">3</span>
			<span onclick="input(this)" class="no-right-border">/</span>
			<span onclick="input(this)">4</span>
			<span onclick="input(this)">5</span>
			<span onclick="input(this)">6</span>
			<span onclick="input(this)" class="no-right-border">*</span>
			<span onclick="input(this)">7</span>
			<span onclick="input(this)">8</span>
			<span onclick="input(this)">9</span>
			<span onclick="input(this)" class="no-right-border">-</span>
			<span onclick="input(this)" class="no-bottom-border">0</span>
			<span onclick="input(this)" class="no-bottom-border">=</span>
			<span onclick="input(this)" class="no-bottom-border">C</span>
			<span onclick="input(this)" class="no-right-border no-bottom-border">+</span>
		</div>
		<script type="text/javascript">
			/*
				思路步骤：
				第一步：写一个简单的计算器界面。
				第二步：点击能显示当前字符在屏幕上。
				第三步：计算屏幕上的表达式。
			*/
			var screen = document.getElementById('screen');
			var isClick = true; // 等于号，是可以被点击的,也就说明，等于号，还没点击过
			function input(v){
				if(v.innerText === '='){
					screen.innerText = eval(screen.innerText); // 用来计算字符串代码的。
					isClick = false;
					return false;
				}
				if(v.innerText === 'C'){
					screen.innerText = '';
					return false;
				}
				if(isClick){
					screen.innerText += v.innerText;
				}else{
					screen.innerText = v.innerText;
					isClick = true;
				}
			}
		</script>
	</body>
</html>